<template>
	<view>
		<!-- <view class="sign_text" @tap="toggle('bottom')">
			<text style="line-height: 60px;margin-top: 12px;">点击弹出</text>
		</view> -->
		<!-- 普通弹窗 -->
		<!-- <uni-popup ref="popup">
			<view class="popup-content">
				<view class="header flex1" style="justify-content: space-between;">
					<view class="">
						<view class="t1">
							你的个性标签是？
						</view>
					</view>
					<image class="w180" src="/static/login/birthday.png" mode="widthFix	"></image>
				</view>
			</view>
			

			<view class="box">
				<view class="title flex1">
					<view class=""
						style="width: 6rpx;height: 24rpx;background: #6087F4;border-radius: 20rpx; 	margin-right: 16rpx;">
					</view>
					选择服务标签(最多3个)
				</view>

				<view class="item-box">
					<view :class="item.check?'item i':'item'" v-for="(item,i) in list" :key="i" @click="get(item)">
						{{item.title}}
					</view>
				</view>
			</view>
		</uni-popup> -->
		<uni-popup ref="popup">
			<view class="popup-content">
				<view class="header flex1" style="justify-content: space-between;">
					<view class="t1">
						你的个性标签是？
					</view>
					<image class="w180" src="/static/login/label.png" mode="widthFix"></image>
				</view>
				<view class="box">
					<view class="title">
						选择标签(最多6个)
					</view>

					<view class="item-box">
						<view :class="item.check?'item i':'item'" v-for="item in list" :key="item.id"
							@click="get(item)">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="btn">
					<button @click="close()">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: '文书代写',
					check: false
				}, {
					title: '征地拆迁',
					check: false
				}, {
					title: '劳动仲裁',
					check: false
				}, {
					title: '离婚咨询',
					check: false
				}, {
					title: '工伤赔偿',
					check: false
				}, {
					title: '交通事故',
					check: false
				}, {
					title: '信贷逾期',
					check: false
				}, {
					title: '刑事辩护',
					check: false
				}, {
					title: '合同纠纷',
					check: false
				}, {
					title: '知识产权',
					check: false
				}, {
					title: '消费权益',
					check: false
				}, {
					title: '保险理赔',
					check: false
				}, {
					title: '工程建设',
					check: false
				}, {
					title: '房产纠纷',
					check: false
				}, {
					title: '行政诉讼',
					check: false
				}],
				arr: []
			}
		},
		props: {
			tags: { //此必须为数组
				default: () => []
			}
		},
		async created() {
			const res = await this.$api.get_tags()
			this.list = res.data;
			this.list.forEach(item => {
				// console.log(item);
				// item.check = false
				this.$set(item, 'check', false)
			})

		},
		methods: {
			//弹窗开启
			toggle() {
				this.$refs.popup.open('bottom')
				this.callback()
			},
			//弹窗关闭
			close() {
				this.$emit('getlabel', this.arr)
				this.$refs.popup.close()
			},
			get(item) {
				if (this.arr.length >= 6 && item.check == false) return
				let arr = []
				item.check = !item.check
				console.log(item);
				this.list.forEach(i => {
					if (i.check) {
						arr.push(i.title)
					}
				})
				this.arr = arr
				console.log(arr);
			},
			callback() {
				// console.log(this.tags);
				if (this.tags.length == 0) return
				let arr = []
				this.list.forEach(item => {
					this.tags.forEach(i => {
						// this.tags.split(',').forEach(i => {
						// console.log(item.title, i);
						if (item.title == i) {
							item.check = true
							arr.push(item.title)
						}
					})
				})
				this.arr = arr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picker-view {
		width: 690rpx;
		height: 410rpx;

	}

	.item {
		line-height: 80rpx;
		text-align: center;
	}

	.popup-content {
		width: 750rpx;
		// height: 846rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding-bottom: 5vh;
		opacity: 1;

		// padding-top: 30rpx;
		.header {
			padding: 60rpx;
		}

		.t1 {
			font-size: 46rpx;
			font-family: PingFang SC;
			color: #333333;
			margin: 100rpx 0 30rpx;
		}

		.t2 {
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #999999;
		}

		button {
			width: 650rpx;
			line-height: 100rpx;
			background: linear-gradient(0deg, #0D96FF 0%, #4760FF 100%);
			border-radius: 50rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			margin: 40rpx auto;
		}
	}

	.box {
		height: 30vh;
		padding: 20rpx 0 20rpx 20rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}

		.item-box {
			display: flex;
			flex-wrap: wrap;
		}

		// .item {
		// 	width: 128rpx;
		// 	height: 54rpx;
		// 	font-size: 24rpx;
		// 	color: #949494;
		// 	line-height: 54rpx;
		// 	background: #F6F6F6;
		// 	text-align: center;
		// 	border-radius: 10rpx;
		// 	margin: 20rpx 30rpx 0 0;
		// }
		.item {
			width: 154rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #666666;
			border: 1px solid #DDDDDD;
			border-radius: 30rpx;
			margin: 20rpx 20rpx 0 0;
		}

		.i {
			color: #4265FF;
			border: 1px solid #4265FF;
		}
	}
</style>